<template>
    <base-panel>
        <top-simple-search @addFun="toAdd" @click="toSearch"></top-simple-search>
        <simple-table ref="myTable" :showNo = false  :tree-props="{ children: 'children' }" :formatter="dataFormatter">
            <el-table-column align="left" prop="name" label="名称"/>
            <el-table-column align="left" label="操作" width="200">
                <template slot-scope="{row}">
<!--                    <detail-button @click="toDetail(row)"></detail-button>-->
                    <edit-button @click="toEdit(row)"></edit-button>
                    <delete-button @click="toDelete(row.id)"></delete-button>
                    <my-button handle="list" @click="toShowList(row)">物品列表</my-button>
                </template>
            </el-table-column>
        </simple-table>
        <detail-dialog :visible.sync="visible" v-if="visible" @reloadList="getList" :row="currRow" :disabled="disabled"></detail-dialog>
        <goods-list-dialog  :visible.sync="listVisible" v-if="listVisible" :row="currRow"></goods-list-dialog>
    </base-panel>

</template>
<script>
    import DetailDialog from "./DetailDialog";
    import simpleTable from "@/mixins/SimpleTable";
    import XEUtils from "xe-utils";
    import GoodsListDialog from "./GoodsListDialog";
    export default {
        mixins:[simpleTable],
        components: {GoodsListDialog, DetailDialog},
        data(){
            return{
                listVisible:false
            }
        },
        methods:{
            dataFormatter(data) {
                return XEUtils.toArrayTree(data, {strict: true, parentKey: 'parent', key: 'id', children: 'children'});
            },
            toShowList(row){
                this.currRow = row
                this.listVisible = true
            }
        }
    }
</script>
<style lang="scss" scoped>
    // 修改图标
    ::v-deep .el-icon-arrow-right:before {// content: "+";color: #1890ff;font-size: 20px;font-weight: 700px;
    }
    ::v-deep .el-table__expand-icon .el-icon-arrow-right:before {
        content: "+";
        color: #1e82e0;
        font-size: 22px;
        font-weight: bold;
    }
    ::v-deep [class*="el-table__row--level"] .el-table__expand-icon {transform: rotate(0);
    }
    ::v-deep .el-table__expand-icon--expanded .el-icon-arrow-right:before {
        content: "-";
        color: #1e82e0;
        font-size: 30px;
        font-weight: bold;
    }
    ::v-deep .el-table__placeholder::before {margin-left: 20px;
    }
</style>
